<template>
  <div class="page-manage">
    <!-- top -->
    <div class="m-top">
      <a-button type="primary" @click="handleAdd">新建页面</a-button>
    </div>
    <!-- 列表 -->
    <a-table :columns="columns" :data-source="data" :loading="loading">
      <template #bodyCell="{ column, record, index }">
        <template v-if="column.key === 'logoPath'">
          <a-avatar :src="record.logoPath" />
        </template>
        <template v-else-if="column.key === 'pageStatus'">
          <a-tag :color="record.pageStatus ? 'green' : ''">{{ record.pageStatus ? '已发布' : '未发布' }}</a-tag>
        </template>
        <template v-else-if="column.key === 'templateName'">
          <a-tag color="blue">{{ record.templateName }}</a-tag>
        </template>
        <template v-else-if="column.key === 'route'">
          <span>{{ routePrefix + `mother-set/${record.pageStatus}/${record.id}` }}</span>
        </template>
        <template v-else-if="column.key === 'action'">
          <span>
            <a @click="handleConfig(record)">配置</a>
            <a-divider type="vertical" />
            <a @click="handleEdit(index)">编辑</a>
            <a-divider type="vertical" />
            <a @click="handleStatus(record, index)">{{ !record.pageStatus ? '发布' : '停用' }}</a>
            <template v-if="!record.pageStatus">
              <a-divider type="vertical" />
              <a @click="handleDel(record, index)">删除</a>
            </template>
          </span>
        </template>
      </template>
    </a-table>
    <!-- 页面的 新增/编辑 表单 -->
    <page-form ref="pageForm" :motherData="motherData" @submit="submit" />
  </div>
</template>

<script>
import pageApi from '@/api/management/page'
import PageForm from './components/PaegForm.vue'
import motherboardApi from '@/api/management/motherboard'
/**
 * 页面管理
 * @author 朱琦
 * @date   时间：2023/1/9
 */
export default {
  name: 'PageManage',
  components: { PageForm },
  data() {
    return {
      data: [],
      motherData: [],
      columns: [
        {
          title: 'Logo',
          dataIndex: 'logoPath',
          key: 'logoPath',
          width: 60
        },
        {
          title: '名称',
          dataIndex: 'pageName',
          key: 'pageName',
          width: 250
        },
        // {
        //   title: '标题',
        //   dataIndex: 'pageTitle',
        //   key: 'pageTitle'
        // },
        {
          title: '所属母版',
          dataIndex: 'templateName',
          ellipsis: true,
          key: 'templateName'
        },
        {
          title: '状态',
          key: 'pageStatus',
          dataIndex: 'pageStatus'
        },
        {
          title: '地址',
          key: 'route',
          dataIndex: 'route',
          width: 400
        },
        {
          title: '描述',
          dataIndex: 'pageDescribe',
          ellipsis: true,
          key: 'pageDescribe'
        },
        {
          title: '操作',
          width: 250,
          key: 'action'
        }
      ],
      loading: false,
      currentIndex: null,
      routePrefix: window.location.origin + process.env.BASE_URL
    }
  },
  computed: {},
  created() {},
  async mounted() {
    await this.getMotherData()
    this.getData()
  },
  methods: {
    /**
     * 获取页面列表
     */
    getData() {
      this.loading = true
      pageApi
        .getPageList()
        .then(res => {
          this.data = res.data || []
        })
        .finally(() => {
          this.loading = false
        })
    },
    /**
     * 获取母版列表
     */
    async getMotherData() {
      const { data } = await motherboardApi.getMotherboardList()
      this.motherData = data
    },
    /**
     * 点击新增按钮
     */
    handleAdd() {
      this.$refs.pageForm.show()
    },
    /**
     * 点击编辑按钮
     */
    handleEdit(index) {
      this.currentIndex = index
      this.$refs.pageForm.show(false, this.data[this.currentIndex])
    },
    /**
     * 点击配置按钮
     * @param {*} record
     */
    handleConfig(record) {
      this.$router.push({
        name: 'PageConfiguration',
        params: {
          id: record.id
        }
      })
    },
    /**
     * 点击改变状态
     * @param {*} record
     * @param {*} index
     */
    handleStatus(record, index) {
      this.currentIndex = index
      const text = !record.pageStatus ? '发布' : '停用'
      this.$confirm({
        title: `确定${text}该页面吗？`,
        onOk: async () => {
          await this.submit(
            {
              id: record.id,
              pageStatus: !record.pageStatus ? 1 : 0
            },
            false
          )
          this.$message.success(`${text}该页面成功！`)
        }
      })
    },
    /**
     * 点击删除按钮
     */
    handleDel(record, index) {
      this.$confirm({
        title: '确定删除该页面？',
        onOk: () => {
          pageApi
            .delPage({
              id: record.id
            })
            .then(res => {
              this.data.splice(index, 1)
              this.$message.success(`删除该页面成功！`)
            })
        }
      })
    },
    /**
     * 数据提交
     * 新增、更新数据
     * @param {Object} data 数据
     * @param {Boolean} isAdd 是否是新增
     */
    async submit(data, isAdd) {
      const res = await pageApi.setPage(data)
      if (isAdd) {
        // 新增
        this.data.unshift({ ...res.data })
      } else {
        // 更新
        this.data[this.currentIndex] = { ...this.data[this.currentIndex], ...data }
      }
      this.$message.success('操作成功')
      this.$refs.pageForm.hide()
      this.getData()
    }
  }
}
</script>

<style scoped lang="less">
.page-manage {
}
</style>
